<template>
  <div class="demand-page-box">
    <div class="page-container">
      <!-- 检索条件 -->
      <div class="form-parent-newbox1">
        <div class="form-title-area">
          <div class="form-title-left-area">
            <span>查询条件</span>
          </div>
          <div class="form-title-right-area">
            <el-button size="mini" icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
            <el-button size="mini" icon="el-icon-refresh" type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
        <el-form size="mini" class="form-area-box" :inline="true" :model="formData" label-position="left">
          <el-row>
            <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="6">
              <el-form-item label="行政区">
                <el-select filterable clearable placeholder="请选择" v-model="formData.districtCode">
                  <el-option v-for="item in districtCodeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="6">
              <el-form-item label="负责人">
                <el-select filterable clearable placeholder="请选择" v-model="formData.manager">
                  <el-option v-for="item in managerList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="table-buttons-box">
        <el-button v-if="myRole == 'district_manager'" size="mini" type="primary" icon="el-icon-plus" @click="handleAddHsjcd">添加</el-button>
      </div>
      <el-table ref="tb" :data="tableData" tooltip-effect="dark" style="width: 100%" :height="tableHeight" border :header-cell-style="{
            background: '#FAFAFA',
            color: '#262626',
            textAlign: 'center',
          }" highlight-current-row>
        <el-table-column align="center" width="50" label="序号" type="index" :index="indexMethod"></el-table-column>
        <el-table-column align="center" prop="name" label="检测点名称" :min-width="publicFunc.flexColumnWidth('name', tableData)" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="districtName" label="行政区" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="managerName" label="负责人" min-width="80"></el-table-column>
        <el-table-column align="left" prop="addressDetail" label="详细地址" :min-width="publicFunc.flexColumnWidth('address_detail', tableData)" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column align="center" prop="longitude" label="经度" min-width="100"></el-table-column>
        <el-table-column align="center" prop="latitude" label="纬度" min-width="100"></el-table-column> -->
        <el-table-column align="center" prop="openTime" label="早晨开始时间" min-width="100"></el-table-column>
        <el-table-column align="center" prop="closeTime" label="晚上结束时间" min-width="100"></el-table-column>
        <el-table-column align="center" prop="windowNum" label="窗口数量" min-width="100"></el-table-column>
        <el-table-column align="center" label="是否开放" min-width="100">
          <template slot-scope="scope">
            {{scope.row.status == "true" ? "开放" : scope.row.status == "false" ? "暂未开放" : ""}}
          </template>
        </el-table-column>
        <el-table-column v-if="myRole == 'district_manager' || myRole == 'hsjcdManager'" fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="myRole == 'district_manager' || myRole == 'hsjcdManager'" size="mini" type="text" @click="handleUpdateHsjcd(scope.row)">修改</el-button>
            <el-button v-if="myRole == 'district_manager'" size="mini" type="text" @click="handleDeleteHsjcd(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :totalCount="totalCount" :currentPage="currentPage" :pageSizeList="pageSizeList" :pageSize="pageSize" class="pagination-area-box"></Pagination>
    </div>
    <!-- 新增/编辑核酸监测点 弹框 -->
    <el-dialog :title="showCreateHsjcdTKTitle" width="80%" :append-to-body="true" :visible.sync="showCreateHsjcdTK" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form label-width="100px" label-position="left" :model="hsjcdInfo" :rules="rules" ref="createHsjcdInfo">
        <el-form-item label="检测点名称" prop="hsjcdName">
          <el-input type="text" v-model="hsjcdInfo.hsjcdName" placeholder="请输入" :disabled="myRole == 'hsjcdManager'"></el-input>
        </el-form-item>
        <el-form-item label="行政区" prop="districtCode">
          <el-select filterable clearable placeholder="请选择" v-model="hsjcdInfo.districtCode" :disabled="myRole == 'hsjcdManager'">
            <el-option v-for="item in districtCodeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="manager">
          <el-select filterable clearable placeholder="请选择" v-model="hsjcdInfo.manager" :disabled="myRole == 'hsjcdManager'">
            <el-option v-for="item in managerList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input type="text" v-model="hsjcdInfo.addressDetail" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="早晨开始时间">
          <el-time-picker v-model="hsjcdInfo.openTime" value-format="HH:mm:ss" placeholder="请选择"></el-time-picker>
        </el-form-item>
        <el-form-item label="晚上结束时间">
          <el-time-picker v-model="hsjcdInfo.closeTime" value-format="HH:mm:ss" placeholder="请选择"></el-time-picker>
        </el-form-item>
        <el-form-item label="现在是否开放">
          <el-switch v-model="hsjcdInfo.status" active-color="#409EFF" inactive-color="#ccc" active-text="开放" inactive-text="暂不开放"></el-switch>
        </el-form-item>
        <el-form-item label="窗口数量">
          <el-input type="number" v-model="hsjcdInfo.windowNum" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" icon="el-icon-close" @click="showCreateHsjcdTK = false">取消</el-button>
        <el-button size="mini" icon="el-icon-check" type="primary" @click="handleSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
let me;
import Pagination from "@/components/common/pagination";
import publicFunc from "@/resources/js/publicFunc";
import { queryLoginuserRole } from "@/api/login.api"
import { hsjcdList, updateHsjcd, addHsjcd, deleteHsjcd, getManagerList } from "@/api/fangyiData/hsjcd.api";
import { getMyDistrictList, } from "@/api/fangyiData/bingli.api";
export default {
  data() {
    return {
      publicFunc: publicFunc,
      myRole: "",// 自己的角色是什么
      // 表单
      districtCodeList: [],
      managerList: [],
      formData: {
        name: "",
        districtCode: "",
        manager: "",
      },
      // 表格和分页
      tableHeight: "74vh",
      tableData: [],
      totalCount: 0,
      currentPage: 1,
      pageSizeList: [10, 20, 50],
      pageSize: 10,
      showCreateHsjcdTKTitle: "",
      showCreateHsjcdTK: false,
      hsjcdInfo: {
        id: "",
        hsjcdName: "",
        districtCode: "",
        manager: "",
        addressDetail: "",
        openTime: "",
        closeTime: "",
        status: false,
        windowNum: "",
      },
      rules: {
        hsjcdName: [{ required: true, message: "请输入检测点名称", trigger: "blur" }],
        districtCode: [{ required: true, message: "请选择行政区", trigger: "change" }],
        manager: [{ required: true, message: "请选择检测点负责人", trigger: "blur" }],
      },
    };
  },
  watch: {
    myRole() {
    this.$nextTick(() => {
      let formHeight = document.querySelector(".form-parent-newbox1");
      let tableButtonHeight = document.querySelector(".table-buttons-box");
      let paginationHeight = document.querySelector(".pagination-area-box");
      this.tableHeight =
        window.innerHeight -
        formHeight.offsetHeight -
        tableButtonHeight.offsetHeight -
        paginationHeight.offsetHeight -
        20 +
        "px";
    });
    }
  },
  components: {
    Pagination,
  },
  mounted() {
    me = this;
    me.queryRole();// 查询自己的角色
    me.queryHsjcdMangers();// 查询核酸监测点的负责人列表
    me.queryDistrictList();// 查询行政区
    me.queryItemsList();// 查询检测点的列表
    me.$nextTick(() => {
      let formHeight = document.querySelector(".form-parent-newbox1");
      let tableButtonHeight = document.querySelector(".table-buttons-box");
      let paginationHeight = document.querySelector(".pagination-area-box");
      me.tableHeight =
        window.innerHeight -
        formHeight.offsetHeight -
        tableButtonHeight.offsetHeight -
        paginationHeight.offsetHeight -
        20 +
        "px";
    });
    window.onresize = function (res) {
      me.$nextTick(() => {
        let formHeight = document.querySelector(".form-parent-newbox1");
        let tableButtonHeight = document.querySelector(".table-buttons-box");
        let paginationHeight = document.querySelector(".pagination-area-box");
        me.tableHeight =
          window.innerHeight -
          formHeight.offsetHeight -
          tableButtonHeight.offsetHeight -
          paginationHeight.offsetHeight -
          20 +
          "px";
      });
    };
  },
  beforeDestroy() {
    window.onresize = function () { };
  },
  methods: {
    /**
     * 查询自己的角色
     * 
     */
    queryRole() {
      queryLoginuserRole({}).then(res => {
        if (res.code == "200" && res.data && Array.isArray(res.data) && res.data.length > 0) {
          me.myRole = res.data[0].role_code;
        } else {
          me.myRole = "";
        }
      }).catch(err => {
        me.myRole = "";
      })
    },
    // 核酸检测人负责人列表
    queryHsjcdMangers() {
      getManagerList({})
        .then((res) => {
          if (res.code == "200") {
            me.managerList = res.data;
          } else {
            me.managerList = [];
          }
        })
        .catch((err) => {
          me.managerList = [];
        });
    },
    // 行政区的列表
    queryDistrictList() {
      getMyDistrictList({})
        .then((res) => {
          if (res.code == "200") {
            me.districtCodeList = res.data;
          } else {
            me.districtCodeList = [];
          }
        })
        .catch((err) => {
          me.districtCodeList = [];
        });
    },
    // 查询
    handleQuery() {
      me.currentPage = 1;
      me.queryItemsList();
    },
    // 重置
    handleReset() {
      me.formData.name = "";
      me.formData.districtCode = "";
      me.formData.manager = "";
      me.currentPage = 1;
      me.queryItemsList();
    },
    // 每页展示数量变化时
    handleSizeChange(e) {
      me.pageSize = e;
      me.currentPage = 1;
      me.queryItemsList();
    },
    // 当前页码变化时
    handleCurrentChange(e) {
      me.currentPage = e;
      me.queryItemsList();
    },
    // 封装查询和导出的参数列表
    getQueryParam() {
      let param = {
        name: me.formData.name,
        districtCode: me.formData.districtCode,
        manager: me.formData.manager,
      };
      return param;
    },
    // 查询表格数据
    queryItemsList() {
      let param = {
        size: me.pageSize,
        page: me.currentPage,
        ...me.getQueryParam(),
      };
      var rLoading = me.openLoading();
      hsjcdList(param)
        .then((res) => {
          rLoading.close();
          if (res.code == "200") {
            me.tableData = res.data;
            me.totalCount = res.total;
          } else {
            me.$message.error(res.msg || "查询失败，请稍后再试~");
          }
        })
        .catch((err) => {
          rLoading.close();
          me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
        });
    },
    //   序号获取
    indexMethod(index) {
      var total = me.pageSize * (me.currentPage - 1);
      return total + index + 1;
    },
    // 添加
    handleAddHsjcd() {
      me.hsjcdInfo = {
        id: "",
        hsjcdName: "",
        districtCode: "",
        manager: "",
        addressDetail: "",
        openTime: "",
        closeTime: "",
        status: false,
        windowNum: "",
      };
      me.showCreateHsjcdTKTitle = "添加核酸检测点";
      me.showCreateHsjcdTK = true;
      me.$nextTick(() => {
        me.$refs.createHsjcdInfo.clearValidate();
      })
    },
    // 修改
    handleUpdateHsjcd(item) {
      me.hsjcdInfo = {
        id: item.id,
        hsjcdName: item.name,
        districtCode: item.districtCode,
        manager: item.manager_account,
        addressDetail: item.addressDetail,
        openTime: item.openTime,
        closeTime: item.closeTime,
        status: item.status == "true" ? true : false,
        windowNum: item.windowNum,
      };
      me.showCreateHsjcdTKTitle = "编辑核酸检测点";
      me.showCreateHsjcdTK = true;
      me.$nextTick(() => {
        me.$refs.createHsjcdInfo.clearValidate();
      })
    },
    // 添加或修改
    handleSave() {
      let errorTip = !me.hsjcdInfo.hsjcdName
        ? "请输入检测点名称"
        : !me.hsjcdInfo.manager
          ? "请选择检测点负责人"
          : !me.hsjcdInfo.districtCode
            ? "请选择行政区" : "";
      if (!!errorTip) {
        me.$message.error(errorTip);
        return;
      }
      let param = {
        name: me.hsjcdInfo.hsjcdName,
        districtCode: me.hsjcdInfo.districtCode,
        manager: me.hsjcdInfo.manager,
        addressDetail: me.hsjcdInfo.addressDetail,
        openTime: me.hsjcdInfo.openTime,
        closeTime: me.hsjcdInfo.closeTime,
        status: me.hsjcdInfo.status,
        windowNum: Number(me.hsjcdInfo.windowNum)
      };
      //   判断是新增还是修改，调的接口不同，要不要传id
      if (me.hsjcdInfo.id) {
        param.id = me.hsjcdInfo.id;
        confirmSave(updateHsjcd(param));
      } else {
        confirmSave(addHsjcd(param));
      }
      function confirmSave(pro) {
        let rLoading = me.openLoading();
        pro.then((res) => {
          rLoading.close();
          if (res.code == "200") {
            me.showCreateHsjcdTK = false;
            me.$message.success("操作成功~");
            me.queryItemsList();
          } else {
            me.$message.error(res.msg || "操作失败，请稍后再试~");
          }
        })
          .catch((err) => {
            rLoading.close();
            me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
          });
      }
    },
    // 删除组织
    handleDeleteHsjcd(item) {
      me.$alert(`您确认删除${item.name}吗？`, "温馨提示", {
        confirmButtonText: "确认",
        callback: (action) => {
          if (action == "confirm") {
            let rLoading = me.openLoading();
            deleteHsjcd({
              id: item.id,
            })
              .then((res) => {
                rLoading.close();
                if (res.code == "200") {
                  me.$message.success("已删除~");
                  me.queryItemsList();
                } else {
                  me.$message.error(res.msg || "删除失败，请稍后再试~");
                }
              })
              .catch((err) => {
                rLoading.close();
                me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
              });
          }
        },
      });
    },
  },
};
  </script>
  <style lang="less" scoped>
.page-container {
  .el-form {
    /deep/.el-col {
      .el-form-item {
        .el-form-item__label {
          width: 80px;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
    }
    .el-button--primary {
      color: #fff;
    }
  }
}

/deep/.el-dialog {
  .el-dialog__body {
    max-height: 60vh;
    overflow: auto;
    .el-form {
      .el-form-item {
        margin-top: 1.2em;
        .el-form-item__content {
          .el-select,
          .el-date-editor {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
  